<template>
  <ElContainer style="height: 100%">
    <ElAside width="680px">
      <ElCard>
        <CameraView @default-photo-list="defaultPhotoList" ref="videoRef"></CameraView>
      </ElCard>
      
      <ElCard style="text-align: center">
        <el-button type="success" @click="handleSave" loading-icon="Save"
        >保存
        </el-button>
        <el-button type="info" @click="clear" loading-icon="Save"
        >清空
        </el-button>
        <el-button
          type="warning"
          @click="asyncHandle"
          loading-icon="Eleme"
          :loading="asyncLoading"
        >同步
        </el-button>
        <LocalHistoryList :table="db.busView" :edit-btn="true" @edit-click="handleHistoryEditClick"/>
      </ElCard>
    </ElAside>
    <ElMain>
    
      <UserCard v-model:user-data="qrCodeInfo" type="gun" />
      <br />
      <ElCard header="检测信息">
        <ElForm label-width="120px">
          <ElFormItem label="医生">
            <ElInput v-model="doctor" />
          </ElFormItem>
          <!--          <ElFormItem label="检测部位">-->
          <!--            <ElSelect v-model="formModel.checkPoint" style="width: 100%">-->
          <!--              <ElOption label="胸部" value="胸部"></ElOption>-->
          <!--            </ElSelect>-->
          <!--          </ElFormItem>-->
          <ElFormItem label="巡检结果">
<!--            <ElCheckboxGroup v-model="formModel.result">-->
<!--              <ElCheckbox-->
<!--                :label="item.content"-->
<!--                :title="item.content"-->
<!--                v-for="item in resultList"-->
<!--                :key="item.id"-->
<!--                >{{ item.title }}</ElCheckbox-->
<!--              >-->
<!--            </ElCheckboxGroup>-->
            <ElButton type="warning" @click="resultModel.visible = true">
              <ElIcon>
                <Plus />
              </ElIcon>
            </ElButton>
            <el-input type="textarea" v-model="formModel.result" rows="4"></el-input>
          </ElFormItem>
          <ElFormItem label="巡检意见">
            <el-input type="textarea" v-model="formModel.comment" rows="4"></el-input>
          </ElFormItem>
          <!-- <ElFormItem v-model="formModel.result">
                                              <ElSelect
                                                type="textarea"
                                                v-model="formModel.result"
                                                :multiple="true"
                                              >
                                                <ElOption label="正常" value="正常"></ElOption>
                                              </ElSelect>
                                            </ElFormItem> -->
        </ElForm>
      </ElCard>
    </ElMain>
  </ElContainer>
  <MyDialog
    v-bind="resultModel"
    v-model:visible="resultModel.visible"
  >
    <BusResult ref="busResult"></BusResult>
  </MyDialog>
</template>

<script lang="ts" setup>
import { ref, toRaw, watch } from "vue";
import CameraView from "./CameraView.vue";
import UserCard from "@/components/UserCard/index.vue";
import { useTerminalAsync } from "@/hooks/useTerminalAsync";
import { db, DbService } from "@/db/db";
import LocalHistoryList from "@/components/LocalHistoryList/index.vue";
import { IBusResult, IBusViewCloud } from "@/model/TerminalType";
import { createQRCodeInfo, IQRCodeInfo } from "@/model/IQRCodeInfo";
import dayjs from "dayjs";
import useMyDialog from "@/components/MyDialog/useMyDialog";
import BusResult from "./BusResult/index.vue";
import { ElMessage } from "element-plus";
import { asyncBusView } from "@/api/asyncApi";
const dbService = new DbService(db.busView);
const qrCodeInfo = ref<Partial<IQRCodeInfo>>({});
const doctor = ref(window.localStorage.getItem("doctorName") || "");
watch(doctor, (value) => {
  window.localStorage.setItem("doctorName", value);
});
const formModel = ref<Partial<IBusViewCloud>>({});
const videoRef = ref<InstanceType<typeof CameraView>>();

const article = "B超";
const busResult = ref();
const resultModel = useMyDialog({
  title: "检查结果",
  visible: false,
  showConfirmBtn: true,
  handleConfirmClick:function (table){
    var result = busResult.value.getData()
    // resultData.value = toRaw(result)
    formModel.value.result = result.map(item=>{
      return item.content
    }).join(";")
    formModel.value.comment = result.map(item=>{
      return item.title;
    }).join(";")
    return true;
  }
});
const { asyncLoading, asyncHandle } = useTerminalAsync(
  db.busView,
  asyncBusView
);
const handleSave = async () => {

  if (!qrCodeInfo.value.id) {
    ElMessage.error("请先扫码");
    return;
  }
  const images = videoRef.value?.getPhotoList();
  formModel.value.photos = toRaw(images);
  if (formModel.value.photos?.length === 0) {
    ElMessage.error("请先截图");
    return;
  }
  formModel.value.article = article;
  formModel.value.checkPoint = "腹部";
  const result: any = await dbService.saveCard(
    toRaw(formModel.value),
    toRaw(qrCodeInfo.value)
  );
  ElMessage.success(result.message);
  qrCodeInfo.value = createQRCodeInfo();
  formModel.value = {};
  videoRef.value?.clearPhotoList();
  if (formModel.value.doctor) {
    window.localStorage.setItem("doctorName", formModel.value.doctor);
  }
};
const clear = () => {
  formModel.value = {};
  videoRef.value?.clearPhotoList();
};

const defaultPhotoList = ref([])
const handleHistoryEditClick = (data)=>{
  console.log("edit",data)
  console.log(data.photos)
  defaultPhotoList.value = data.photos
  videoRef.value?.setPhotoList(data.photos);
  formModel.value = {
    id:data.id,
    photos:data.photos,
    result:data.result,
    doctor:data.doctor,
    checkPoint:data.checkPoint,
    comment:data.comment
  }
  qrCodeInfo.value.idno=data.cardId;
  qrCodeInfo.value.sex=data.sex;
  qrCodeInfo.value.id=data.qr_code_id;
  qrCodeInfo.value.username=data.userName;
}

</script>
<style scoped lang="scss"></style>
